<template> 
  <div id="app">
      <router-view/>

      <!-- 导航条 -->
      <nav-bar>
        <nav-bar-item link="/home" activeTextColor="#000">
          <img src="../src/assets/img/navbar/home.svg" alt="" slot="item-icon">
          <img src="../src/assets/img/navbar/home_active.svg" slot="item-icon-active" alt="">
          <p slot="item-text">首页</p>
        </nav-bar-item>
        <nav-bar-item link="/category" activeTextColor="red">
          <img src="../src/assets/img/navbar/category.svg" alt="" slot="item-icon">
          <img src="../src/assets/img/navbar/category_active.svg" slot="item-icon-active" alt="">
          <p slot="item-text">分类</p>
        </nav-bar-item>
        <nav-bar-item link="/shopping" activeTextColor="green">
          <img src="../src/assets/img/navbar/shopping.svg" alt="" slot="item-icon">
          <img src="../src/assets/img/navbar/shopping_active.svg" slot="item-icon-active" alt="">
          <p slot="item-text">购物车</p>
        </nav-bar-item>
        <nav-bar-item link="/profile" activeTextColor="blue">
          <img src="../src/assets/img/navbar/profile.svg" alt="" slot="item-icon">
          <img src="../src/assets/img/navbar/profile_active.svg" slot="item-icon-active" alt="">
          <p slot="item-text">我的</p>
        </nav-bar-item>
      </nav-bar>
  </div>
</template>

<script>
import NavBar from '@/components/navbar/Navbar.vue'
import NavBarItem from '@/components/navbar/NavBarItem.vue'

export default {
  name: 'App',
  components: {
    NavBar,
    NavBarItem
  },
}
</script>
<style>
@import url("./assets/css/normal.css");

#app{
  background-color: rgb(131, 197, 254);
  /* 相对我们可视区域的高度 */
  height: 100vh;
}
</style>
